<template>
<div>
    <v-card class="overflow-hidden">
    <v-app-bar
        color="#6A76AB"
        dark
    >
      <template v-slot:img="{ props }">
        <v-img
          v-bind="props"
          gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
        ></v-img>
      </template>
      <!--<v-app-bar-nav-icon></v-app-bar-nav-icon>-->
      <v-toolbar-title>任务列表</v-toolbar-title>

      <div class="flex-grow-1"></div>

      <v-btn icon @click="back">
        <v-icon>keyboard_backspace</v-icon>
      </v-btn>
    
      <template v-slot:extension>
        <v-tabs background-color="transparent">
            <v-tab @click="setordershow(1)" style="margin-left:0">所有表单</v-tab>
            <!--<v-tab @click="setordershow(2)" style="margin-left:0">待支付</v-tab>
            <v-tab @click="setordershow(3)" style="margin-left:0">已支付</v-tab>-->
         </v-tabs>
      </template>
    </v-app-bar>
    <v-sheet
      id="scrolling-techniques-4"
      class="overflow-y-auto"
      max-height="100%"
    >
    <v-container>
        <!-- 所有订单 -->
        <div v-if="ordershow == 1">
            <v-row>
            <v-col>
            <v-card
                class="mx-auto mtop"
                outlined
                v-for="(allorder, i) in fromStaff" :key="i"
            >
                <v-list-item three-line>
                <v-list-item-content>
                    <div class=" mb-4 font10px overline" THIN>编号：{{ allorder.order_no }}</div>
                    <v-list-item-title class="caption mb-1">{{ allorder.title }}</v-list-item-title>
                    <v-list-item-subtitle class="overline">{{ allorder.desc }}</v-list-item-subtitle>
                </v-list-item-content>

                <v-list-item-avatar
                    tile
                    size="80"
                    color="grey"
                    :src="images[i]"
                ></v-list-item-avatar>
                </v-list-item>
                <v-card-actions>
                    <v-btn text color="error" @click="orderDo(allorder.order_no)">{{ allorder.status==0 ? "待处理":  allorder.status==1 ? "正在处理": allorder.status==2 ? "处理完毕": "已关闭"}}</v-btn>
                    <!--<v-btn text color="" v-if="allorder.status == 1" @click="revokeorder(allorder.order_no)">取消</v-btn>
                    
                    <v-btn text color="rgba(0,0,0,0.1)" @click="deleteorder(allorder.order_no)" >删除</v-btn>-->
                </v-card-actions>
            </v-card>
            </v-col>
            </v-row>
        </div>
         <!-- 待支付 
        <div v-if="ordershow == 2">
            <v-row>
                <v-col>
                <v-card
                class="mx-auto mtop"
                outlined
                v-for="(allorder, i) in nopayorders" :key="i"
                >
                    <v-list-item three-line>
                    <v-list-item-content>
                        <div class=" mb-4 font10px overline" THIN>订单编号：{{ allorder.order_no }}</div>
                        <v-list-item-title class="caption mb-1">{{ allorder.body }}</v-list-item-title>
                        <v-list-item-subtitle class="overline">交易时间：{{ allorder.UpdatedAt }}:{{ allorder.total_fee/100 }}</v-list-item-subtitle>
                        <v-list-item-subtitle class="overline">交易金额：{{ allorder.FeeType }}:{{ allorder.total_fee/100 }}</v-list-item-subtitle>
                    </v-list-item-content>
                    <v-list-item-avatar
                    tile
                    size="80"
                    color="grey"
                    ></v-list-item-avatar>
                    </v-list-item>
                    <v-card-actions>
                        <v-btn text color="error" @click="orderDo(allorder.order_no,allorder.status,allorder.write_off,allorder.call_using_url,allorder.call_used_url)">{{ allorder.status == 1 ? "待支付" : allorder.status == 2 ? allorder.write_off ?  allorder.call_used : allorder.call_using : "已取消" }} </v-btn>
                        <v-btn text color="" v-if="allorder.status == 1" @click="revokeorder(allorder.order_no)">取消</v-btn>
                    </v-card-actions>
                </v-card>
                </v-col>
            </v-row>
        </div>
        已支付 
        <div v-if="ordershow == 3">
            <v-row>
                <v-col>
                <v-card
                class="mx-auto mtop"
                outlined
                v-for="(allorder, i) in okorders" :key="i"
                >
                    <v-list-item three-line>
                    <v-list-item-content>
                        <div class=" mb-4 font10px overline" THIN>订单编号：{{ allorder.order_no }}</div>
                        <v-list-item-title class="caption mb-1">{{ allorder.body }}</v-list-item-title>
                        <v-list-item-subtitle class="overline">交易时间：{{ allorder.UpdatedAt }}:{{ allorder.total_fee/100 }}</v-list-item-subtitle>
                        <v-list-item-subtitle class="overline">交易金额：{{ allorder.FeeType }}:{{ allorder.total_fee/100 }}</v-list-item-subtitle>
                    </v-list-item-content>

                    <v-list-item-avatar
                        tile
                        size="80"
                        color="grey"
                    ></v-list-item-avatar>
                    </v-list-item>
                    <v-card-actions>
                        <v-btn text color="error" @click="orderDo(allorder.order_no,allorder.status,allorder.write_off,allorder.call_using_url,allorder.call_used_url)">{{ allorder.status == 1 ? "待支付" : allorder.status == 2 ? allorder.write_off ?  allorder.call_used : allorder.call_using : "已取消" }} </v-btn>
                        <v-btn text color="" v-if="allorder.status == 1" @click="revokeorder(allorder.order_no)">取消</v-btn>
                    </v-card-actions>
                </v-card>
                </v-col>
            </v-row>
        </div>

        已支付 -->
        <!--
        <v-tab-item>
            <v-container fluid>
            <v-row>
                <v-col>
                <v-card
                :v-if="ordershow == 4"
                class="mx-auto mtop"
                outlined
                v-for="(allorder, i) in okorders" :key="i"
                >
                    <v-list-item three-line>
                    <v-list-item-content>
                        <div class=" mb-4 font10px overline" THIN>订单编号：{{ allorder.order_no }}</div>
                        <v-list-item-title class="caption mb-1">{{ allorder.body }}</v-list-item-title>
                        <v-list-item-subtitle class="overline">交易时间：{{ allorder.UpdatedAt }}:{{ allorder.total_fee/100 }}</v-list-item-subtitle>
                        <v-list-item-subtitle class="overline">交易金额：{{ allorder.FeeType }}:{{ allorder.total_fee/100 }}</v-list-item-subtitle>
                    </v-list-item-content>

                    <v-list-item-avatar
                        tile
                        size="80"
                        color="grey"
                    ></v-list-item-avatar>
                    </v-list-item>
                    
                    <v-card-actions>
                        <v-btn text color="error" @click="tocall(allorder.call_url,allorder.order_no)">{{ allorder.call_name }}</v-btn>
                    </v-card-actions>
                </v-card>
                </v-col>
            </v-row>
            </v-container>
        </v-tab-item>
        -->
        </v-container>
    </v-sheet>
   
  </v-card>
  <v-card style="box-shadow: 0 0 0 rgba(0,0,0,0);">
      <div class="text-center" style="box-shadow: 0 0 0 rgba(0,0,0,0);">
            
        </div>
    <div class="text-center">
            <v-dialog
            v-model="payloding"
            :persistent="true"
            width="300"
            >
            <v-card
                color="primary"
                dark
            >
                <v-card-text>
                请稍侯...
                <v-progress-linear
                    indeterminate
                    color="white"
                    class="mb-0"
                ></v-progress-linear>
                </v-card-text>
            </v-card>
            </v-dialog>
        </div>
  </v-card>
</div>
</template>
<script>

import {domain,FromStaffList,URLP } from './../../api/api'

export default {
    data: ()=>({
        vsheetHeight:0,
        ordershow:1,
        fromStaff: [],
        images:[],
        loding:true,
        payloding:false,
    }),
    methods: {
        orderDo:function(order_no){ // 订单按钮动作
            this.$router.push("/staff/workorder/handle?order_no="+order_no)
        }
    },
    created: function(){
        FromStaffList(100,0,this.$cookies.get("authtoken"))
        .then((resp)=>{
            var res = resp.data
            if(res.code == 1){
                this.fromStaff = res.data // title desc images[0]=res.data.images.split(",")[0]
                // this.images+=res.data.images.split(",")[0]
                for(var i =0;i< res.data.length; i++){
                     this.images[i]=res.data[i].images.split(",")[0]
                }
            }
            this.$store.commit('setProgress',false)
            this.$store.commit('setAlert',{icon:'error',text:res.msg,show:true})
        })
        .catch((err)=>{
            this.$store.commit('setProgress',false)
            this.$store.commit('setAlert',{icon:'error',text:err,show:true})
        })
    },
}
</script>

<style scoped>
.mtop {
    margin-top: 1rem;
}
.font10px {
    font-size: 10px;
}
</style>